<template>
  <div>
    <div class="box1">
      <div class="cla">
        <span>分类</span>
        <ul>
          <li
            v-for="(item, index) in fl"
            :key="index"
            :class="{ on: index == isON }"
            @click="On(item.classname, index)"
          >
            {{ item.classname }}
          </li>
        </ul>
      </div>
      <div class="area">
        <span>地区</span>
        <ul>
          <li
            v-for="(item, index) in dq"
            :key="index"
            :class="{ on: index == isON2 }"
            @click="On2(item.areaname, index)"
          >
            {{ item.areaname }}
          </li>
        </ul>
      </div>
      <div class="year">
        <span>年份</span>
        <ul>
          <li
            v-for="(item, index) in nf"
            :key="index"
            :class="{ on: index == isON3 }"
            @click="On3(item.yearname, index)"
          >
            {{ item.yearname }}
          </li>
        </ul>
      </div>
    </div>
    <div class="box2">
      <ul>
        <li v-for="(item, index) in dy" :key="index" @click="gotoxq(item.id)">
          <img :src="basurl + item.url" alt="图片" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <el-empty v-show="hiden" description="暂无数据"></el-empty>
  </div>
</template>

<script>
import { getfl, getdy, queMovie } from "@/api/index";
export default {
  data() {
    return {
      cla: "全部",
      isON: 0,
      isON2: 0,
      isON3: 0,
      fl: [],
      dq: [],
      nf: [],
      dy: [],
      basurl: " http://127.0.0.1:7001",
      value: "",
      value2: "",
      value3: "",
      value4: this.$route.query.keyname,
      hiden: false,
    };
  },
  watch: {
    value() {
      this.quedata(this.value4, this.value, this.value2, this.value3);
    },
    value2() {
      this.quedata(this.value4, this.value, this.value2, this.value3);
    },
    value3() {
      this.quedata(this.value4, this.value, this.value2, this.value3);
    },
    $route(){
      this.quedata(this.$route.query.keyname, this.value, this.value2, this.value3);
    }
  },
  created() {
    this.getdata();
    //this.value4 = this.$route.query.keyname;
    if (this.$route.query.keyname) {
    this.quedata(this.value4, this.value, this.value2, this.value3);
    }
    this.value4 = "";
  },
  methods: {
    getdata() {
      getfl().then((res) => {
        if (res.code == 0) {
          this.fl = res.data;
          this.dq = res.data1;
          this.nf = res.data2;
        } else {
          console.log("请求错误");
        }
      });
      getdy().then((res) => {
        if (res.code == 0) {
          this.dy = res.data;
        } else {
          console.log("请求错误");
        }
      });
    },
    On(classify, index) {
      this.isON = index;
      this.value = classify;
    },
    On2(area, index) {
      this.isON2 = index;
      this.value2 = area;
    },
    On3(year, index) {
      this.isON3 = index;
      this.value3 = year;
    },
    gotoxq(id) {
      sessionStorage.setItem("id", id);
      this.$router.push("/details");
    },
    //查询
    quedata(keyname, classify, area, year) {
      this.hiden = false;
      queMovie(keyname, classify, area, year).then((res) => {
        if (res.code == 0) {
          this.dy = res.data;
          if (this.dy.length == 0) {
            this.hiden = true;
          }
        }
        //this.setdata();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box1 {
  margin-bottom: 50px;
}
.cla,
.area,
.year {
  width: 1200px;
  margin: 20px auto;
  display: flex;
  span {
    color: rgba(0, 0, 0, 0.34);
    font-size: 14px;
  }
  ul {
    list-style: none;
    width: 1000px;
    display: flex;
    li {
      width: 70px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        color: #1e7dd7;
      }
    }
  }
}
.on {
  color: #1e7dd7;
}
.box2 {
  width: 1200px;
  margin: 0 auto;
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    li {
      margin-left: 20px;
      margin-bottom: 30px;
      cursor: pointer;
      img {
        width: 180px;
        height: 240px;
        object-fit: cover;
      }
      p {
        width: 180px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.87);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>